<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css" />
		<link rel="stylesheet" href="css/register.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<div class="mui-input-group">
				<div class="mui-input-row">
					<label>登录名</label>
					<input type="text" class="mui-input-clear" placeholder="请输入登录名" maxlength="45" id="loginName">
				</div>
				<div class="mui-input-row">
					<label>姓名</label>
					<input type="text" class="mui-input-clear" placeholder="请输入姓名" maxlength="45" id="userName">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="text" class="mui-input-clear" placeholder="请输入密码" id="pwd">
				</div>
				<div class="mui-input-row">
					<label>确认密码</label>
					<input type="text" class="mui-input-clear" placeholder="请再次输入密码" id="confirmPwd">
				</div>
				<div class="mui-input-row">
					<label>区域</label>
					<span class="mui-input-clear gongzhong" id="quyu">请选择区域</span>
					<!--<input type="text" class="mui-input-clear" placeholder="">-->
				</div>
				<div class="mui-input-row">
					<label>风场</label>
					<span class="mui-input-clear gongzhong" id="fengchang">请选择风场</span>
					<!--<input type="text" class="mui-input-clear" placeholder="请选择风场">-->
				</div>
				<div class="mui-input-row">
					<label>单位（公司）</label>
					<input type="text" class="mui-input-clear" placeholder="请输入单位（公司）" id="unit">
				</div>
				<div class="mui-input-row">
					<label>手机号</label>
					<input type="number" class="mui-input-clear" placeholder="请输入手机号" id="phone">
				</div>
				<div class="mui-input-row" style="display: none;">
					<label>工种</label>
					<!--<input type="" class="mui-input-clear gongzhong" placeholder="请选择工种">-->
					<span class="mui-input-clear gongzhong" id="gongzhong">请选择工种</span>
				</div>
				<!--<div class="mui-input-row">
					<label>是否外来人员</label>
					<div id="radio_count">
						<span class="radio">
			
				        	是
				        </span>
						<span class="radio">
				        	
				        	否
				        </span>
					</div>

				</div>-->
			</div>
			<span class="register">注册</span>
		</div>

	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/jquery-3.2.1.min.js"></script>
	<script src="../../js/mkeyplus.base.js"></script>
	<script src="../../js/common.js"></script>
	<script type="text/javascript" charset="utf-8">
		var loginName = ""; //登录名
		var userName = ""; //姓名
		var pwd = ""; // 密码
		var confirmPwd = ""; //确认密码
		var area_ = ""; //区域
		var windFarm = ""; // 风场
		var unit = ""; //单位
		var phone = ""; //手机号码
		var isForeignWorkers = ""; // 是否外来人员
		var quyu = "";
		var fengchang = "";

		// 注册类型
		var self = null;
		var val, val1;

		var orgData = null;
		var areaData = null;
		var windData = null;
		var areaPick = new mui.PopPicker();
		var windPick = new mui.PopPicker();
		mui.init();
		mui.plusReady(function() {
			self = plus.webview.currentWebview();
			val = self.val;
			val1 = self.val1;
			console.log(val1);
			if(val1 == "1") { // 1为内部员工,提示输入工号,隐藏公司输入框,登录名默认显示P
				$('#loginName').attr('placeholder', '内部员工请输入工号!');
				$('#unit').parent().remove();
				$('#loginName').focus(function() {
					var elem = document.getElementById("loginName");
					elem.value = "P";
					//设置游标位置    注意要用setTimeout 不然android无效    
					//具体原因 
					setTimeout(function() {
						elem.setSelectionRange(elem.value.length, elem.value.length);
					}, 10);
				});

			}
			console.log("===" + JSON.stringify(orgData));
			$('.register').on('tap', function() {
				submitInfo();
			});
			getOrg();
		});

		function getOrg() {
			//			plus.nativeUI.showWaiting('获取区域信息中...');
			mui.baseApp.httpRequst('/api/v2/users/getOrgs', {},
				function(data) {
					if(data.status == 200) {
						console.log("获取区域信息成功");
						orgData = data.data;
						areaData = new Array(); //区域数据
						$.each(orgData, function(i, v) {
							var temp = {
								value: v.id,
								text: v.name
							}
							areaData.push(temp);
						});
						areaPick.setData(areaData);
					} else if(data.status == "500") {
						console.log('获取区域信息失败!')
					}
				},
				function() {
					console.log("获取区域信息失败");
					//					mui.toast("获取区域信息失败！！！");
				});
		}
		//选择工种
		document.getElementById('gongzhong').addEventListener('tap', function() {
			var picker = new mui.PopPicker();
			picker.setData([{
					value: 'zz',
					text: '什么工种1'
				},
				{
					value: 'zz',
					text: '什么工种2'
				},
				{
					value: 'zz',
					text: '什么工种3'
				},
				{
					value: 'zz',
					text: '什么工种4'
				}
			]);
			picker.show(function(selectItems) {
				console.log(JSON.stringify(picker.getSelectedItems(selectItems)))
				document.getElementById('gongzhong').innerText = picker.getSelectedItems(selectItems)[0].text;
			});

		});
		//选择风场
		document.getElementById('fengchang').addEventListener('tap', function() {

			windPick.show(function(selectItems) {
				document.getElementById('fengchang').textContent = windData[windPick.pickers[0].getSelectedIndex()].text;
				$('#fengchang').attr('data-id', windData[windPick.pickers[0].getSelectedIndex()].value);
				console.log('org-id===' + windData[windPick.pickers[0].getSelectedIndex()].value);
			});

		});
		//选择区域
		document.getElementById('quyu').addEventListener('tap', function() {

			areaPick.show(function() {
				var index = areaPick.pickers[0].getSelectedIndex();
				console.log(areaPick.pickers[0].getSelectedIndex());
				//设置显示值
				document.getElementById('quyu').textContent = areaData[index].text;
				$('#quyu').attr('data-id', areaData[index].value);
				//设置风场值
				windData = new Array();
				document.getElementById('fengchang').textContent = "请选择";
				$.each(orgData[index].child, function(i, v) {

					var temp = {
						value: v.id,
						text: v.name
					}
					windData.push(temp);
				});
				windPick.setData(windData);
			});

		});
		// 获取填写的注册信息
		function getInfo() {
			loginName = $('#loginName').val(); //登录名
			userName = $('#userName').val(); //姓名
			pwd = $('#pwd').val(); // 密码
			confirmPwd = $('#confirmPwd').val(); //确认密码
			area_ = $('#quyu').data('id'); //区域
			quyu = $('#quyu').text();
			windFarm = $('#fengchang').data('id'); // 风场
			fengchang = $('#fengchang').text();
			unit = $('#unit').val(); //单位
			phone = $('#phone').val(); //手机号码
		}
		//去掉特殊符号的方法
		String.prototype.TextFilter = function() {
			var pattern = new RegExp("[`~%!@#^=''?~！@#￥……&——‘”“'？*()（），,。.、]"); //[]内输入你要过滤的字符，这里是我的
			var rs = "";
			for(var i = 0; i < this.length; i++) {
				rs += this.substr(i, 1).replace(pattern, '');
			}
			return rs;
		}
		// 提交注册信息
		function submitInfo() {
			getInfo();
			loginName = loginName[0].toUpperCase() + loginName.substr(1, 6);
			console.log("loginName " + loginName);
			var loginReg = /^[P][A-Za-z0-9]{6}$/;
			// 登录名验证
			var txt = loginName.TextFilter(); //调用上面的去字符方法
			if(txt != loginName) {
				mui.toast("登录名不能包含特殊字符,如:! @ # 等 ");
				return;
			}
			if(val1 == "1") {
				if(loginName == "") {
					mui.toast('请输入登录名');
					return;
				} else if(loginReg.test(loginName) == false) {
					mui.toast('请输入首字母为大写P,长度为7位的工号!');
					return;
				}
			} else {
				if(loginName == "") {
					mui.toast('请输入登录名');
					return;
				} else if(loginName.length < 6) {
					mui.toast('登录名长度不得小于6位!');
					return;
				}
			}
			if(loginName == "") {
				mui.toast('请输入登录名');
				return;
			} else if(loginName.length < 6) {
				mui.toast('登录名长度至少为6位!');
				return;
			}
			// 姓名验证
			var reg = /^[\u4E00-\u9FA5]{2,4}$/;
			if(userName == "") {
				mui.toast('请输入姓名!');
				return;
			} else if(userName != "" && !reg.test(userName)) {
				mui.toast('姓名为2-4位的汉字!');
				return;
			}
			//密码验证
			if(pwd == "") {
				mui.toast('请输入密码!');
				return;
			} else if(pwd.length < 6) {
				mui.toast('密码长度至少为6位!');
				return;
			}
			if(pwd != confirmPwd) {
				mui.toast('两次密码输入不一致!');
				return;
			}
			// 区域
			if(quyu == "请选择区域" || quyu == "") {
				mui.toast('请选择区域!');
				return;
			}
			//风场
			if(fengchang == "请选择风场" || quyu == "") {
				mui.toast('请选择风场!');
				return;
			}
			//单位
			if(val1 == "0") {
				if(unit == "") {
					mui.toast('请输入单位名称!');
					return;
				}
			}

			var phoneReg = /^1[0-9]{10}$/;
			//手机
			if(phone == "") {
				mui.toast('请输入手机号码!');
				return;
			}
			if(!phoneReg.test(phone)) {
				mui.toast('请输入正确的手机号码!');
				return;
			}
			//是否外来人员
			//			if(isForeignWorkers == "") {
			//				mui.toast('请选择是否为外来人员!');
			//				return;
			//			}
			plus.nativeUI.showWaiting('注册中...');
			mui.baseApp.httpRequst('/api/v2/users/regist', {
				username: loginName,
				name: userName,
				password: pwd,
				orgid: windFarm,
				unit: unit,
				neibu: val1,
				desc: val,
				phoneno: phone
			}, function(data) {
				plus.nativeUI.closeWaiting();
				console.log(JSON.stringify(data));
				if(data.status == '200') {
//					submitInfoxj();
						mui.toast('注册成功!');
						mui.openWindow({
							url: 'login.html',
							id: 'login.html',
							extras: {
								name_: loginName,
								pwd: pwd
							}
						})
						mui.openWindow('login.html', 'login.html');
				} else if(data.status == '400') {
					plus.nativeUI.closeWaiting();
					mui.toast('没有选择组织orgid!');
				} else if(data.status == '409') {
					plus.nativeUI.closeWaiting();
					mui.toast('该用户名已存在!');
				} else if(data.status == "500") {
					plus.nativeUI.closeWaiting();
					mui.toast('注册失败,请检查网络!');
				}
			}, function() {
				plus.nativeUI.closeWaiting();
				//				console.log("注册失败");
				//				mui.toast("注册失败！！！");
			});

		}
		var AppId = mui.baseApp.AppId; //APPid
		var AppKey = mui.baseApp.AppKey; // AppKey
		var AppSecret = mui.baseApp.AppSecret; // AppSecret
		var version; // 版本
		var timestamp = Date.parse(new Date()); // 时间戳
		var token = '1';
		var OSType; // 系统
		var DGUID;
		version = localStorage.getItem('version'); // 版本
		OSType = (mui.os.ios) ? "ios" : "android"; // 系统
		if(localStorage.getItem("uuid") == null || localStorage.getItem("uuid") == "") {
			DGUID = plus.device.uuid;
			localStorage.setItem("uuid", param.DGUID);
		} else {
			DGUID = localStorage.getItem("uuid");
		}
		//巡检服务器接口
		function submitInfoxj() {
			mui.ajax(Config.xjurl + '/api/v2/users/regist', {
				data: {
					username: loginName,
					name: userName,
					password: pwd,
					orgid: windFarm,
					unit: unit,
					neibu: val1,
					desc: val,
					phoneno: phone,
					AppId: AppId,
					AppKey: AppKey,
					AppSecret: AppSecret,
					version: version,
					timestamp: timestamp,
					OSType: OSType,
					DGUID: DGUID
				},
				dataType: 'json',
				type: 'POST',
				timeout: 10000,
				success: function(data) {
					plus.nativeUI.closeWaiting();
					console.log(JSON.stringify(data));
					if(data.status == '200') {
						
						mui.toast('注册成功!');
						mui.openWindow({
							url: 'login.html',
							id: 'login.html',
							extras: {
								name_: loginName,
								pwd: pwd
							}
						})
						mui.openWindow('login.html', 'login.html');
					} else if(data.status == '400') {
						mui.toast('没有选择组织orgid!');
					} else if(data.status == '409') {
						mui.toast('该用户名已存在!');
					} else if(data.status == "500") {
						mui.toast('注册失败,请检查网络!');
					}
				},
				error: function() {
					plus.nativeUI.closeWaiting();
				}
			})
		}
		//		function selectForeigner() { // 外来人员点击选择
		//			$('#radio_count').on('tap', 'span', function() {
		//				if($(this).hasClass('radio_act')) {
		//					$(this).removeClass('radio_act').siblings().removeClass('radio_act');
		//				} else {
		//					$(this).addClass('radio_act').siblings().removeClass('radio_act');
		//				}
		//				if($(this).text().trim() == "是") {
		//					$(this).attr('data-v', '1');
		//
		//				} else {
		//					$(this).attr('data-v', '0');
		//				}
		//				isForeignWorkers = $(this).data('v');
		//			});
		//		}
	</script>

</html>